<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="ctp" uri="http://www.seeyon.com/ctp"%>
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>apps_res/plugin/kk/layui/css/layui.css"  media="all">
<script src="<%=basePath%>apps_res/plugin/kk/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/seeyon/common/js/jquery.js"></script>
</head>
<body>
  <input id="formmainId" value="${formmainId}" type="hidden"/>
    <input id="contentTemplateId" value="${contentTemplateId}" type="hidden"/>
<div style=" border:1px solid white;height:30px;background-color:#87CEFF;">
  <p style="font-size:20px;color:white;">会议日程</p>
</div>
<table id="demo" class="layui-hide" lay-filter="demoEvent" >
</body>
  <script>
layui.use('table', function(){
	var table = layui.table;
   table.render({ //其它参数在此省略
     elem:'#demo',
     height:'full-70',
     limit:'20',
     url: '<%=basePath%>kkMeetingController.do?method=queryMeeting',
     page: false ,
	 cols: [[
	  {field: '会议会场', title: '会议会场', width:'10%'}
      ,{field: '会议开始时间', title: '会议开始时间', width:'15%'}
	  ,{field: '会议结束时间', title: '会议结束时间', width:'15%'}
      ,{field: '分钟', title: '分钟', width:'5%'}
   	  ,{field: '日程描述', title: '日程描述', width:'25%'}
   	  ,{field: '讲者类别', title: '讲者类别', width:'10%'}
   	  ,{field: '服务类型', title: '服务类型', width:'10%'}
   	  ,{field: '提供者', title: '提供者', width:'10%'}
    ]],
     id: 'testReload',
    where: {
    	     formmainId:$("#formmainId").val(),
    	     contentTemplateId:$("#contentTemplateId").val()
           }
    ,done: function (res, curr, count) {
                merge(res);
               } 
	})
});

function merge(res) {    
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['会议会场','会议开始时间','会议结束时间','分钟','日程描述'];//需要合并的列名称
        var columsIndex = [0,1,2,3,4];//需要合并的列索引值
    
        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                    
                    if ((data[i][columsName[0]] === data[i-1][columsName[0]])&&(data[i][columsName[1]] === data[i-1][columsName[1]])&&(data[i][columsName[2]] === data[i-1][columsName[2]])&&(data[i][columsName[3]] === data[i-1][columsName[3]])&&(data[i][columsName[4]] === data[i-1][columsName[4]])) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    }else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
            mergeIndex = 0;
            mark = 1;
        }
    }
</script>
</html>